<style lang="less">

</style>
<template>
  <div>
    <el-dialog title="销账" :visible.sync="isShow" width="30%">
      <el-form ref="truckLoadEarnestCancelAccountForm" :model="truckLoadEarnestCancelAccountForm" label-width="80px">
        <el-form-item label="销账金额">
          <el-input class="f-w70" v-model="truckLoadEarnestCancelAccountForm.price" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款时间" prop="paymentDate"
                      :rules="{required: true, type: 'date',message: '请选择收款时间', trigger: 'change'}">
          <el-date-picker style="width: 70%"
                          v-model="truckLoadEarnestCancelAccountForm.paymentDate"
                          type="datetime"
                          placeholder="选择收款时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到账银行">
          <el-input class="f-w70" v-model="truckLoadEarnestCancelAccountForm.toBank"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-input class="f-w70" v-model="truckLoadEarnestCancelAccountForm.bankCardNumber"></el-input>
        </el-form-item>
        <el-form-item label="银行流水号">
          <el-input class="f-w70" v-model="truckLoadEarnestCancelAccountForm.bankNumber"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input class="f-w70" type="textarea" v-model="truckLoadEarnestCancelAccountForm.remark"></el-input>
        </el-form-item>
        <el-form-item label="交易凭证">
          <el-upload class="el-upload-wh"
                     :on-success="handleAvatarSuccess"
                     action="/api/v2.0/admin/file_upload"
                     ref="upload"
                     :file-list="fileList"
                     list-type="picture-card"
                     :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="50%" style="width: 40%" :src="dialogImageUrl" alt>
          </el-dialog>
          <label>只能上传jpg/png文件，且文件不超过2M</label>
        </el-form-item>
        <el-form-item>
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="saveCancelAccountBtn">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { isEmpty, resetForm } from '../../lib/util.js';
import { saveTruckLoadEarnestCancelAccount } from '../../api/order/TruckLoadEarnest.js';

export default {
  name: 'TruckLoadEarnestDialog',
  props: {
    truckLoadEarnest: {}
  },
  watch: {
    truckLoadEarnest (val) {
      resetForm(this.$refs.truckLoadEarnestCancelAccountForm, this.truckLoadEarnestCancelAccountForm);
      this.fileList = [];
      let model = JSON.parse(val);
      if (isEmpty(model) || isEmpty(model.id)) {
        return;
      }
      this.truckLoadEarnestCancelAccountForm.price = model.reserveTruckPrice;
      this.truckLoadEarnestCancelAccountForm.truckLoadManage = model;
      this.isShow = model.isShow;
    }
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      isShow: false,
      fileList: [],
      truckLoadEarnestCancelAccountForm: {
        price: '',
        paymentDate: '',
        toBank: '',
        bankCardNumber: '',
        bankNumber: '',
        remark: '',
        images: '',
        paymentType: '',
        paymentTypeName: '',
        truckLoadManage: {}
      }
    };
  },
  methods: {
    saveCancelAccountBtn () {
      this.$refs['truckLoadEarnestCancelAccountForm'].validate((truckLoadEarnestCancelAccountFormValid) => {
        if (truckLoadEarnestCancelAccountFormValid) {
          saveTruckLoadEarnestCancelAccount(this.truckLoadEarnestCancelAccountForm).then((res) => {
            if (res.data.successFlg) {
              this.$message.success('销账成功');
              this.$emit('isRefresh', true);
              this.isShow = false;
            } else {
              this.$message.error('销账异常');
            }
          });
        }
      });
    },
    handleAvatarSuccess (res, file) {
      if (res.successFlg) {
        this.truckLoadEarnestCancelAccountForm.images = isEmpty(this.truckLoadEarnestCancelAccountForm.images) ? res.obj + ',' : this.truckLoadEarnestCancelAccountForm.images + res.obj + ',';
      } else {
        this.$message.error('图片上传异常！请重新选择');
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 和 png格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  mounted () {}
};
</script>
